<template>
	<view v-if="detail">
		<uni-nav-bar leftIcon="arrow-left" leftWidth="40rpx" rightWidth="60rpx" fixed="true" @clickLeft="back()"
			statusBar>
			<view class="music-title">
				<view>
					<text class="name">{{detail.name}}</text>
					<text class="artists">{{artistsName}}</text>
				</view>
			</view>
		</uni-nav-bar>
		<view class="music-content" @click="goLyric(detail.id)">
			<image :src="detail.al.picUrl+'?param=225y225'" mode="aspectFit"
				:style="paused ? 'animation-play-state:running;' : 'animation-play-state:paused;'" v-if="isShow">
			</image>
			<scroll-view scroll-y="true" v-if="!isShow" :scroll-top="scrollTop" scroll-with-animation>
				<view style="height: 30vh;"></view>
				<view v-for="(item,i) of lyric" :key="i"
					:class="lyrSecond[i+1] >= currentTime && currentTime >= lyrSecond[i] ? `red ${index = i}` : ''">
					{{item}}
				</view>
				<view style="height: 30vh;"></view>
			</scroll-view>
		</view>
		<view class="music-control">
			<view>
				<uni-icons :type="like?'heart-filled':'heart'" :style="like?'color:red':''" size="30" @click="heart">
				</uni-icons>
				<uni-icons type="download" size="30" @click="download"></uni-icons>
			</view>
			<view>
				<text>{{start}}</text>
				<slider @change="change" @changing="changing" block-size="12" block-color="rgb(51, 51, 51)"
					activeColor="rgb(51, 51, 51)" :value="value" />
				<text>{{total}}</text>
			</view>
			<view>
				<uni-icons custom-prefix="iconfont"
					:type="mode === 1 && 'icon-LOOP_ONCE' || mode === 2 && 'icon-loop1' || mode === 3 && 'icon-loop'"
					size="40" @click="setMode">
				</uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-previous" size="30" @click="prev"></uni-icons>
				<uni-icons custom-prefix="iconfont" :type="paused ? 'icon-stop1' : 'icon-playcircle'" size="50"
					@click="switchover">
				</uni-icons>
				<uni-icons custom-prefix="iconfont" type="icon-next" size="30" @click="next"></uni-icons>
				<uni-icons type="list" size="30" @click="open"></uni-icons>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<playing></playing>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex' //引入mapState
	// import {formatTime} from '../../common/util.js'
	export default {
		data() {
			return {
				like: false,
				start: '00:00',
				total: '',
				value: 0,
				updateState: true,
				scrollTop: 0,
				isShow: true,
				currentTime: 0,
				index: 0
			}
		},
		computed: {
			...mapState(['url', 'detail', 'paused', 'likeMusic', 'audio', 'paused', 'musicIndex', 'musicList', 'mode',
				'lyric', 'lyrSecond'
			]),
			...mapGetters(['artistsName'])
		},
		methods: {
			...mapMutations(['setLikeMusic', 'cutLikeMusic', 'play', 'pause', 'setDetail', 'setMode']),
			...mapActions(['getAudioSrc', 'getLyric']),
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			heart() {
				this.like = !this.like
				if (this.like) {
					this.setLikeMusic(this.detail)
				} else {
					this.cutLikeMusic(this.detail)
				}
			},
			download() {
				// downloadFile 相当于临时缓存
				// console.log(this.audioSrc);

				uni.downloadFile({
					url: this.audio.src,
					success: (res) => {
						// console.log(res.tempFilePath);
						// 浏览器下载方式
						//#ifdef H5
						var a = document.createElement('a');
						a.href = res.tempFilePath;
						a.download = this.detail.name + '.mp3'
						a.click()
						//#endif
						// 手机app下载方式 永久保存
						//#ifndef H5
						uni.saveFile({
							tempFilePath: res.tempFilePath
						})
						//#endif
					}
				})
			},
			plan() {
				// 当前播放时间
				this.currentTime = this.audio.currentTime
				// console.log(this.index)
				this.scrollTop = this.index * 40 * uni.getWindowInfo().screenWidth / 750
				const start = Math.round(this.audio.currentTime)
				// console.log(this.audio.currentTime);
				this.start = this.formatTime(start)
				if (this.updateState) {
					this.value = this.audio.currentTime / this.audio.duration * 100
				}

			},
			change(e) {
				let t = this.audio.duration * (e.detail.value / 100);
				this.audio.seek(t)
				this.updateState = true;
			},
			changing() {
				this.updateState = false;
			},
			formatTime(time) {
				if (typeof time !== 'number' || time < 0) {
					return time
				}

				//var hour = parseInt(time / 3600)
				//time = time % 3600
				var minute = parseInt(time / 60)
				time = time % 60
				var second = time

				return ([minute, second]).map(function(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}).join(':')
			},
			switchover() {
				// console.log(this.paused);
				if (this.paused) {
					this.pause()
				} else {
					this.play()
				}
			},
			next() {
				let num = this.musicIndex + 1
				if (num >= this.musicList.length) {
					num = 0
				}

				this.setDetail(this.musicList[num])
				this.getAudioSrc(this.detail.id)
			},
			prev() {
				let num = this.musicIndex - 1
				if (num < 0) {
					num = this.musicList.length - 1
				}

				this.setDetail(this.musicList[num])
				this.getAudioSrc(this.detail.id)
			},
			open() {
				this.$refs.popup.open()
			},
			goLyric(id) {
				this.isShow = !this.isShow
				// uni.request({
				// 	url: this.url + `/lyric?id=${id}`,
				// 	success: (res) => {
				// 		// console.log(res.data.lrc.lyric);
				// 		let lrc = res.data.lrc.lyric.split('[')
				// 		// console.log(lrc);
				// 		lrc.shift()
				// 		for (let item of lrc) {
				// 			let l = item.split(']')
				// 			let second = this.setSecond(l[0])
				// 			// console.log(second);
				// 			this.lyric.push(l[1])
				// 			this.second.push(second)
				// 		}
				// 		// console.log(this.lyric, this.second);
				// 	}
				// })
				this.getLyric(id)
			},
			setSecond(str) {
				let arr = str.split(':')
				return arr[0] * 60 + arr[1] * 1
			}
		},
		created() {
			let i = this.likeMusic.findIndex(ele => ele.id == this.detail.id)
			if (i != -1) {
				this.like = true
			} else {
				this.like = false
			}
			this.audio.onTimeUpdate(this.plan);
			const total = Math.round(this.audio.duration)
			this.total = this.formatTime(total)
			// //console.log(formatTime(total));
			const start = Math.round(this.audio.currentTime)
			this.start = this.formatTime(start)
			// //console.log(formatTime(start));
			this.value = this.audio.currentTime / this.audio.duration * 100
		},
		destroyed: function() {
			this.audio.offTimeUpdate(this.plan)
		},
	}
</script>

<style lang="scss">
	.music-title {
		margin: auto auto;

		text {
			display: block;
			width: 200rpx;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.name {
			font-size: 28rpx;
			color: #3b4144;
		}

		.artists {
			font-size: 24rpx;
			color: #999;
		}
	}

	.music-content {
		display: flex;
		height: 60vh;
		margin-top: 50rpx;
		justify-content: center;
		align-items: center;

		image {
			width: 450rpx;
			height: 450rpx;
			border-radius: 50%;
			background-color: black;
			animation: rotate 5s linear infinite;
		}

		scroll-view {
			height: 100%;
			text-align: center;
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}

	.music-control {
		position: fixed;
		bottom: 0;
		width: 100%;

		view {
			display: flex;
			margin: 0 20rpx 20rpx;
			justify-content: space-between;
			align-items: center;
		}

		slider {
			width: 600rpx;
		}
	}

	.red {
		color: red;
		font-size: 30rpx;
	}
</style>
